<template>
  <div>
    {{ formValue }}
    -----------------------
    {{ selectV2Options }}
    <myForm ref="formInstance" v-model="formValue" :formItems="formItems" :rules="rules">
      <template #age>
        <el-input v-model="formValue.age"></el-input>
        <div style="color: red">年龄输入框不显示，此处输入框显示的是插槽</div>
      </template>
    </myForm>
    <el-button @click="handleSubmit">提交</el-button>
  </div>
</template>

<script setup>
import { ref, useTemplateRef, h, computed } from "vue";
import myForm from "./components/Form.vue";
import index from "@/views/test/index1.vue";
import { Search,Edit } from "@element-plus/icons-vue";
import { ElButton } from "element-plus";

const formItems = computed(() => {
  return [
    {
      label: "姓名",
      field: "name",
      cloumn: 24,
      // formType: "input",
      required: true,
      props: {
        placeholder: "请输入姓名",
        clearable: true,
        // prefixIcon: "Search",
        onChange: (val) => {
          console.log("change", val);
        },
        onInput: (val) => {
          console.log("input", val);
        },
        onClear: (val) => {
          test();
          console.log("onclear", val);
        },
      },
      slots: {
        append: {
          component: ElButton,
          props: {
            type: "primary",
            icon: Edit,
          },
          events: {
            click: () => {
              console.log("点击了后缀按钮");
              ElMessage.info("点击了后缀按钮");
            },
          },
        },
      },
    },
    {
      label: "年龄",
      field: "age",
      formType: "number",
    },
    {
      label: "描述",
      field: "desc",
      formType: "input",
      hidden: ishidden(),
      cloumn: 12,
      props: {
        type: "textarea",
        placeholder: "请输入",
      },
    },
    {
      label: "性别",
      field: "sex",
      formType: "select",
      cloumn: 12,
      props: {
        options: [
          { label: "男", value: "1" },
          { label: "女", value: "0" },
        ],
        placeholder: "请选择",
        clearable: true,
      },
    },
    {
      label: "自定义组件",
      field: "custom",
      formType: index,
      props: {
        placeholder: "ces",
        clearable: true,
      },
    },
    {
      label: "自定义函数组件",
      field: "custom1",
      formType: () =>
        h(
          "div",
          {
            style: { color: "blue", fontSize: "14px", cursor: "pointer" },
            onClick: () => console.log("点击事件"),
          },
          "通过h函数创建的组件"
        ),

      props: {
        placeholder: "ces",
        clearable: true,
      },
    },
    {
      label: "日期",
      field: "date",
      formType: "date",
      cloumn: 6,
      props: {
        placeholder: "请选择日期",
      },
    },
    {
      label: "选择年",
      field: "year",
      formType: "date",
      cloumn: 6,
      props: {
        placeholder: "请选择",
        type: "year",
        valueFormat: "YYYY",
        format: "YYYY",
      },
    },
    {
      label: "选择月",
      field: "month",
      formType: "date",
      cloumn: 6,
      props: {
        placeholder: "请选择",
        type: "month",
        valueFormat: "YYYY-MM",
        format: "YYYY-MM",
      },
    },
    {
      label: "选择日期时间",
      field: "datetime",
      formType: "date",
      cloumn: 6,
      props: {
        placeholder: "请选择",
        type: "datetime",
      },
    },
    {
      label: "Radio",
      field: "radio",
      formType: "radio",
      cloumn: 12,
      props: {
        options: [
          { label: "男", value: "1" },
          { label: "女", value: "0" },
        ],
      },
    },
    {
      label: "Checkbox",
      field: "checkbox",
      formType: "checkBox",
      cloumn: 12,
      props: {
        options: [
          { label: "男", value: "1" },
          { label: "女", value: "0" },
        ],
      },
    },
    {
      label: "评分",
      field: "rate",
      formType: "rate",
      cloumn: 12,
    },
    {
      label: "虚拟化选择器",
      field: "selectV2",
      formType: "selectV2",
      cloumn: 12,
      props: {
        clearable: true,
        multiple: true,
        filterable: true,
        remote: true,
        options: selectV2Options.value,
        remoteMethod: (query) => remoteMethod(query),
        loading: loading.value,
      },
    },
    {
      label: "颜色选择器",
      field: "colorPicker",
      formType: "colorPicker",
      cloumn: 12,
    },
    {
      label: "级联选择器",
      field: "cascader",
      formType: "cascader",
      cloumn: 12,
      props: {
        filterable: true,
        clearable: true,
        // options: cascaderOptions.value,
        props: {
          lazy: true,
          lazyLoad: (node, resolve) => {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 }).map((item, i) => ({
                value: ++i + "-" + level,
                label: `Option - ${i}`,
                leaf: level >= 2,
              }));
              resolve(nodes);
            }, 1000);
          },
        },
      },
    },
    {
      label: "开关",
      field: "switch",
      formType: "switch",
      cloumn: 12,
      required: true,
      props: {
        // activeValue: "100",
        // inactiveValue: "0",
        activeText: "激活",
        inactiveText: "禁用",
      },
    },
    {
      label: "树形",
      field: "tree",
      formType: "tree",
      cloumn: 12,
      required: true,
      props: {
        lazy: true,
        props: {
          label: "name",
          children: "children",
          isLeaf: "leaf",
        },
        load: (node, resolve) => {
          if (node.level === 0) {
            return resolve([{ name: "region" ,value : 1}]);
          }
          if (node.level > 2) return resolve([]);
          console.log("node", node);
          setTimeout(() => {
            const data = [
              {
                name: "leaf",
                value : 1.1,
                leaf: true,
              },
              {
                name: "zone",
                value : 1.2,
                children: [
                  {
                    name: "leaf1",
                    leaf: true,
                    value : 2.1,
                  },
                ],
              },
            ];

            resolve(data);
          }, 500);
        },
        onNodeClick: (data) => {
          console.log("OnNodeClick", data);
        }
      },
    },
  ];
});
const formValue = ref({switch : false});
const rules = {
  // name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
  desc: [{ required: true, message: "请输入描述", trigger: "blur" }],
};
// 获取表单实例
const formInstance = useTemplateRef("formInstance");
// 提交：触发校验
async function handleSubmit() {
  const valid = await formInstance.value.formValidate();
  if (valid) {
    ElMessage.success("校验成功");
  } else {
    ElMessage.error("校验失败");
  }
}
const test = () => {
  setTimeout(() => {
    console.log("测试");
  }, 200);
};
// 动态隐藏
const ishidden = () => {
  return formValue.value.name == "张三";
};

// selectV2远程搜索--开始
const states = [
  "a",
  "b",
  "c",
  "d",
  "e",
  "f",
  "g",
  "h",
  "i",
  "j",
  "k",
  "l",
  "m",
  "n",
  "o",
  "p",
  "q",
  "r",
  "s",
  "t",
  "u",
  "v",
  "w",
  "x",
  "y",
  "z",
];
const list = states.map((item) => {
  return { value: `value-${item}`, label: item };
});
const selectV2Options = ref([]);
const loading = ref(false);
// 模拟远程方法
function remoteMethod(query) {
  if (query !== "") {
    loading.value = true;
    console.log("query", query);
    setTimeout(() => {
      loading.value = false;
      selectV2Options.value = list.filter((item) => {
        console.log("item", item);
        return item.label == query;
      });
    }, 200);
  } else {
    selectV2Options.value = [];
  }
}
// selectV2远程搜索--结束

// 级联选择器
const cascaderOptions = ref([
  {
    value: "zhejiang",
    label: "浙江",
    children: [
      {
        value: "hangzhou",
        label: "杭州",
        children: [
          {
            value: "xihu",
            label: "西湖",
          },
        ],
      },
    ],
  },
  {
    value: "jiangsu",
    label: "江苏",
    children: [
      {
        value: "nanjing",
        label: "南京",
        children: [
          {
            value: "zhonghuamen",
            label: "中华门",
          },
        ],
      },
    ],
  },
]);
</script>
